﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技师信息提交表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .form-container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .name-phone-line {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .required:after {
            content: " *";
            color: red;
        }

        input[type="text"],
        input[type="tel"],
        textarea {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }

        textarea {
            width: 100%;
            height: 100px;
            resize: vertical;
        }

        .file-upload {
            border: 2px dashed #ddd;
            border-radius: 4px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .file-upload:hover {
            border-color: #1890ff;
            background: #f0f7ff;
        }

        .preview-container {
            display: flex;
            gap: 20px;
            margin-top: 15px;
        }

        .preview-box {
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }

        .preview-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .remove-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            cursor: pointer;
        }

        .submit-btn {
            background: #1890ff;
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            transition: background 0.3s;
        }

        .submit-btn:hover {
            background: #40a9ff;
        }

        .submit-btn:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }

        .error-message {
            color: red;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }

        .progress-container {
            margin-top: 10px;
            display: none;
        }

        .progress-bar {
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background: #1890ff;
            width: 0%;
            transition: width 0.3s;
        }

        @media (max-width: 600px) {
            .name-phone-line {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
</head>

<body>
    <div class="form-container">
        <h1>技师信息提交</h1>
        <form id="technicianForm">
            <div class="form-group">
                <label for="name" class="required">姓名</label>
                <input type="text" id="name" name="name" placeholder="请输入姓名" required>
                <div class="error-message" id="nameError"></div>
            </div>

            <div class="form-group">
                <label for="phone" class="required">电话</label>
                <input type="tel" id="phone" name="phone" placeholder="请输入电话" required>
                <div class="error-message" id="phoneError"></div>
            </div>

            <div class="form-group">
                <label class="required">个人照片</label>
                <div class="file-upload" id="mainImgUpload">
                    <p>点击或拖拽上传个人照片</p>
                    <p><small>支持JPG/PNG格式，大小不超过5MB</small></p>
                    <input type="file" id="mainImg" name="mainImg" accept="image/*" style="display:none;">
                </div>
                <div class="preview-container" id="mainImgPreview" style="display:none;">
                    <img class="preview-img" id="mainImgPreviewImg">
                    <button type="button" class="remove-btn" onclick="removeImage('mainImg')">×</button>
                </div>
                <div class="error-message" id="mainImgError"></div>
            </div>

            <div class="form-group">
                <label class="required">微信二维码</label>
                <div class="file-upload" id="listImgUpload">
                    <p>点击或拖拽上传微信二维码</p>
                    <p><small>支持JPG/PNG格式，大小不超过5MB</small></p>
                    <input type="file" id="listImg" name="listImg" accept="image/*" style="display:none;">
                </div>
                <div class="preview-container" id="listImgPreview" style="display:none;">
                    <img class="preview-img" id="listImgPreviewImg">
                    <button type="button" class="remove-btn" onclick="removeImage('listImg')">×</button>
                </div>
                <div class="error-message" id="listImgError"></div>
            </div>

            <div class="form-group">
                <label for="message" class="required">留言内容</label>
                <textarea id="message" name="message" placeholder="请输入留言内容" required></textarea>
                <div class="error-message" id="messageError"></div>
            </div>

            <div class="progress-container" id="progressContainer">
                <div class="progress-bar">
                    <div class="progress" id="progressBar"></div>
                </div>
                <small id="progressText">上传中: 0%</small>
            </div>

            <button type="submit" class="submit-btn" id="submitBtn">提交信息</button>
        </form>
    </div>

    <script>
        // 初始化事件监听
        document.addEventListener('DOMContentLoaded', function () {
            // 文件上传点击事件
            document.getElementById('mainImgUpload').addEventListener('click', function () {
                document.getElementById('mainImg').click();
            });
            document.getElementById('listImgUpload').addEventListener('click', function () {
                document.getElementById('listImg').click();
            });

            // 文件选择事件
            document.getElementById('mainImg').addEventListener('change', function (e) {
                handleImageUpload(e, 'mainImg');
            });
            document.getElementById('listImg').addEventListener('change', function (e) {
                handleImageUpload(e, 'listImg');
            });

            // 表单提交
            document.getElementById('technicianForm').addEventListener('submit', function (e) {
                e.preventDefault();
                submitForm();
            });

            // 实时验证
            document.getElementById('phone').addEventListener('input', validatePhone);
        });

        // 处理图片上传
        function handleImageUpload(event, fieldName) {
            const file = event.target.files[0];
            if (!file) return;

            // 验证图片类型
            if (!file.type.match('image.*')) {
                showError(fieldName + 'Error', '请上传有效的图片文件');
                resetFileInput(fieldName);
                return;
            }

            // 验证图片大小
            if (file.size > 5 * 1024 * 1024) {
                showError(fieldName + 'Error', '图片大小不能超过5MB');
                resetFileInput(fieldName);
                return;
            }

            // 预览图片
            const reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById(fieldName + 'PreviewImg').src = e.target.result;
                document.getElementById(fieldName + 'Preview').style.display = 'flex';
                hideError(fieldName + 'Error');
            };
            reader.readAsDataURL(file);
        }

        // 移除图片
        function removeImage(fieldName) {
            resetFileInput(fieldName);
            showError(fieldName + 'Error', '请重新上传图片');
        }

        function resetFileInput(fieldName) {
            document.getElementById(fieldName).value = '';
            document.getElementById(fieldName + 'Preview').style.display = 'none';
            document.getElementById(fieldName + 'PreviewImg').src = '';
        }

        // 表单验证
        function validateForm() {
            let isValid = true;

            // 验证姓名
            const name = document.getElementById('name').value.trim();
            if (!name) {
                showError('nameError', '请输入姓名');
                isValid = false;
            } else {
                hideError('nameError');
            }

            // 验证电话
            if (!validatePhone()) {
                isValid = false;
            }

            // 验证图片
            ['mainImg', 'listImg'].forEach(field => {
                if (!document.getElementById(field).files[0]) {
                    showError(field + 'Error', '请上传' + (field === 'mainImg' ? '个人照片' : '微信二维码'));
                    isValid = false;
                }
            });

            // 验证留言
            const message = document.getElementById('message').value.trim();
            if (!message) {
                showError('messageError', '请输入留言内容');
                isValid = false;
            } else {
                hideError('messageError');
            }

            return isValid;
        }

        function validatePhone() {
            const phone = document.getElementById('phone').value.trim();
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(phone)) {
                showError('phoneError', '请输入有效的手机号码');
                return false;
            }
            hideError('phoneError');
            return true;
        }

        // 提交表单
        async function submitForm() {
            if (!validateForm()) return;

            const submitBtn = document.getElementById('submitBtn');
            const progressContainer = document.getElementById('progressContainer');
            const progressBar = document.getElementById('progressBar');
            const progressText = document.getElementById('progressText');

            // 准备表单数据
            const formData = new FormData();
            formData.append('name', document.getElementById('name').value);
            formData.append('phone', document.getElementById('phone').value);
            formData.append('message', document.getElementById('message').value);
            formData.append('mainImg', document.getElementById('mainImg').files[0]);
            formData.append('listImg', document.getElementById('listImg').files[0]);

            // 禁用按钮
            submitBtn.disabled = true;
            progressContainer.style.display = 'block';
            //生产环境接口地址http://47.108.230.236:9001/api/technicians/upload
            //图片会上传到/home/project/tech/uploads目录中,upload会在后台程序中自动创建
            //本地环境接口地址http://127.0.0.1:9001/api/technicians/upload
            //图片会上传到c:/uploads目录中,upload会在后台程序中自动创建
            try {
                const response = await fetch('http://47.108.230.236:9001/api/technicians/upload', {
                    method: 'POST',
                    body: formData,
                    credentials: 'include'  // 如果需要携带cookie
                });

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.message || '上传失败');
                }

                const data = await response.json();
                showSuccess('提交成功！');
                resetForm();
                // 2秒后跳转（用户体验更好）
                // setTimeout(() => {
                //     window.location.href = 'index.html'; // 相对路径跳转
                // }, 2000);
            } catch (error) {
                showError(error.message);
                console.error('上传失败:', error);
            } finally {
                submitBtn.disabled = false;
                progressContainer.style.display = 'none';
            }
        }

        // 显示成功消息
        function showSuccess(message) {
            alert(message);
        }

        // 显示错误信息
        function showError(idOrMessage, message) {
            if (message) {
                const element = document.getElementById(idOrMessage);
                element.textContent = message;
                element.style.display = 'block';
            } else {
                alert(idOrMessage);
            }
        }

        // 隐藏错误信息
        function hideError(id) {
            const element = document.getElementById(id);
            if (element) element.style.display = 'none';
        }

        // 重置表单
        function resetForm() {
            document.getElementById('technicianForm').reset();
            ['mainImg', 'listImg'].forEach(field => {
                document.getElementById(field + 'Preview').style.display = 'none';
            });
            document.querySelectorAll('.error-message').forEach(el => {
                el.style.display = 'none';
            });
        }
    </script>

</body>

</html>